<template>
  <a-modal
    v-model="visible"
    :title="form.id ? '编辑活动安排' : '新建活动安排'"
    :maskClosable="false"
    centered
    width="1000px"
    @ok="submit"
  >
    <a-form-model ref="form" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item
        label="活动安排名称"
        prop="name"
        extra="例如:比如会议坐席安排、晚宴座位安排、拍照展位安排、抽奖编号安排、乘车安排、衣服尺码安排等"
      >
        <a-input v-model="form.name" :maxLength="15" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item label="排序" prop="sort">
        <a-input-number v-model="form.sort" :min="1" :precision="0" />
      </a-form-model-item>

      <a-form-model-item label="时间" prop="endTime">
        <a-range-picker
          v-model="applyTime"
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD H:mm"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :placeholder="['开始时间', '结束时间']"
          @change="changeTime"
        />
      </a-form-model-item>
      <a-form-model-item label="场地地址" prop="address">
        <a-input v-model="form.address" placeholder="请输入" />
      </a-form-model-item>
      <!-- <a-form-model-item label="组名" prop="groupUnit" v-if="!form.id">
        <div class="disFlxAC">
          <a-input placeholder="自增数字" disabled style="width: 80px;" />
          <div class="_pl-5 _pr-5">
            <a-icon type="plus" />
          </div>
          <a-input v-model="form.groupUnit" placeholder="固定文字" style="width: 100px;" />
          <div class="_ml-15 fz-12">示例：1{{ form.groupUnit || '' }}</div>
        </div>
      </a-form-model-item> -->
      <a-form-model-item label="安排编号" prop="locationRule">
        <a-radio-group v-model="form.locationRule">
          <a-radio value="AUTO">自动生成 (组名+安排编号单位)</a-radio>
          <a-radio value="IMPORT">导入安排编号</a-radio>
        </a-radio-group>
        <template v-if="form.locationRule === 'AUTO'">
          <div class="disFlxAC">
            <a-input :disabled="form.id" addon-before="组名后缀" v-model="form.groupUnit" placeholder="请输入" />
            <span class="_ml-8 _mr-8">+</span>
            <a-input addon-before="安排后缀" placeholder="请输入" v-model="form.seatUnit" />
          </div>
        </template>
        <template v-else>
          <div class="disFlxAC">
            <a-input
              addon-before="组名后缀"
              v-model="form.groupUnit"
              placeholder="请输入"
              :disabled="form.id"
              style="width: 230px"
            />
            <span class="_ml-8 _mr-8">+</span>
            <span style="flex-shrink: 0; flex-wrap: nowrap">导入的自定义编号</span>
          </div>
        </template>
        <div class="fz-12 _mt-10 linh-20" style="color: #86909C">
          此为统一配置，组名可单独修改，安排编号自动生成不可修改
        </div>
        <div v-if="form.locationRule === 'AUTO'" class="linh-20 _mt-10" style="color: #165DFF">
          例如：组名后缀为“排”，安排后缀为“座”：
          <a-button @click="openExample(exampleArr[3])">
            显示示例
          </a-button>
          <br />组名显示为：1排、2排、3排…… <br />第一排安排编号显示为：1排1座、1排2座、1排3座……
        </div>
        <div v-else class="linh-20 _mt-10" style="color: #165DFF">
          例如：组名后缀为“排”，
          <br />
          安排编号自定义导入（A01号、A02号、A03号）：
          <a-button @click="openExample(exampleArr[4])">
            显示示例
          </a-button>
          <br />组名显示为：1排、2排、3排……<br />第一排安排编号显示为：1排A01号、1排A02号、1排A03号……
        </div>
      </a-form-model-item>

      <a-form-model-item label="创建组数" prop="groupNum" v-if="!form.id">
        <div class="disFlxAC">
          <a-input-number v-model="form.groupNum" :min="1" :precision="0" />
        </div>
      </a-form-model-item>
      <a-form-model-item label="每组座位数" prop="seatNum" v-if="!form.id">
        <div class="disFlxAC">
          <a-input-number v-model="form.seatNum" :min="1" :precision="0" />
          <!-- <div class="_pl-20 fz-12" style="color: #999;">默认初始配置每组10个数量,创建后可修改</div> -->
        </div>
      </a-form-model-item>
      <a-form-model-item
        label="场次安排是否展示给参会者查看"
        prop="show"
        :label-col="{ span: 12 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-radio-group v-model="form.show">
          <a-radio :value="0">展示</a-radio>
          <a-radio :value="1">不展示</a-radio>
        </a-radio-group>
        <a-button @click="openExample(exampleArr[1])">
          显示示例
        </a-button>
      </a-form-model-item>
      <a-form-model-item
        label="场次安排是否在胸卡上展示"
        prop="badgeShow"
        :label-col="{ span: 12 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-radio-group v-model="form.badgeShow">
          <a-radio :value="0">展示</a-radio>
          <a-radio :value="1">不展示</a-radio>
        </a-radio-group>
        <a-button @click="openExample(exampleArr[2])">
          显示示例
        </a-button>
      </a-form-model-item>
    </a-form-model>
    <a-modal v-model="example.visible" :title="example.title" :footer="null" width="800px">
      <div style="text-align: center;display: flex;gap:10px;justify-content: center;">
        <viewer :images="[img]" v-for="img in example.imgs" >
          <img :src="img" alt="" mode="scaleToFill" width="300px" />
        </viewer>
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      applyTime: [],
      form: {},
      danwei: '',
      example: {
        visible: false,
        imgs: [],
        title: ''
      },
      exampleArr: [
        {
          visible: true,
          imgs: ['https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/seat-example-img.png'],
          title: '活动安排显示示例'
        },
        {
          visible: true,
          imgs: [
            'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/canhui-1.png',
            'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/canhui-2.png'
          ],
          title: '参会者查看活动安排显示示例'
        },
        {
          visible: true,
          imgs: ['https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/xiongka.png'],
          title: '胸卡上显示示例'
        },
        {
          visible: true,
          imgs: ['https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/positionNumberAutomatic.png'],
          title: '自动生成位置编号示例'
        },
        {
          visible: true,
          imgs: ['https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/positionNumberImport.png'],
          title: '自定义导入编号示例'
        }
      ],
      rules: {
        name: [{ required: true, message: '请输入活动安排名称', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        groupUnit: [{ required: true, message: '请输入组名固定字段', trigger: 'blur' }],
        locationRule: [{ required: true, message: '请选择安排编号', trigger: 'change' }],
        groupNum: [{ required: true, message: '请输入组数', trigger: 'blur' }],
        seatNum: [{ required: true, message: '请输入每组数量', trigger: 'blur' }],
        show: [{ required: true, message: '请选择是否显示', trigger: 'change' }],
        badgeShow: [{ required: true, message: '请选择是否显示', trigger: 'change' }]
      }
    }
  },
  methods: {
    openExample(obj) {
      obj.visible = true
      this.example = obj
    },
    changeTime(val) {
      this.form.startTime = val && val.length ? val[0] : ''
      this.form.endTime = val && val.length ? val[1] : ''
    },
    openModel(item) {
      if (item) {
        this.form = {
          id: item.id,
          name: item.name, // 场次名称
          sort: item.sort, // 排序
          startTime: item.startTime, // 开始时间
          endTime: item.endTime, // 结束时间
          address: item.address, // 地址
          groupUnit: undefined, // 组名
          locationRule: item.locationRule, // AUTO 自动生成 IMPORT 导入
          seatUnit: item.seatUnit, //单位
          groupNum: undefined, // 组数
          seatNum: undefined, // 每组人数
          show: item.show, // 0 展示 1 不展示
          badgeShow: item.badgeShow // 胸卡 0 展示 1 不展示
        }
      } else {
        this.form = {
          name: '', // 场次名称
          sort: 1, // 排序
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          address: '', // 地址
          groupUnit: '桌', // 组名
          locationRule: 'AUTO', // AUTO 自动生成 IMPORT 导入
          seatUnit: '', //单位
          groupNum: 1, // 组数
          seatNum: 10, // 每组人数
          show: 0, // 0 展示 1 不展示
          badgeShow: 0 // 胸卡 0 展示 1 不展示
        }
      }
      this.applyTime = this.form.startTime && this.form.endTime ? [this.form.startTime, this.form.endTime] : []
      this.visible = true
    },
    closeModel() {
      this.visible = false
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', this.form)
        }
      })
    }
  }
}
</script>

<style></style>
